<template>
  <div>
    <Top/>
    <Header/>
    <div class="datile-content">
      <div class="datile-warp">
        <div class="detail">
          <!-- HTML5视频标签 -->
          <!-- :poster="resUrl" 封面 -->
          <!-- <video width="100%" height="568" controls autoplay >
            <source :src="resUrl" type="video/mp4">           
          </video> -->
          <div v-if="this.showVideo == 0">
            <div class="video-player-box"
                :playsinline="playsinline"
                v-video-player:myVideoPlayer="playerOptions"
            >
            </div>
          </div>

          <div class="showImag" v-if="this.StorageuseType == 5 || this.StorageuseType == 6">
            <el-image :src="resCover" :preview-src-list="srcList" lazy> </el-image>
          </div>
          
          <!-- 
          <embed type="application/pdf" src="http://192.168.0.229/group1/M00/00/00/wKgA5V0cSc-AbWX4AATxmnpR3ls766.pdf" width="100%" height="565px"  v-if="this.StorageuseType ==4" class="Pdfclass" title="IE浏览器不支持在线预览，请点击下载本地查看或者更换其他浏览器"/>
          -->
          <object :data="resUrl" type="application/pdf" width="100%" height="525px" v-if="this.StorageuseType ==4" class="Pdfclass">            
            <iframe :src="resUrl" width="100%" height="525px" style="border: none;" title="IE浏览器不支持在线预览，请点击下载本地查看或者更换其他浏览器">
            This browser does not support PDFs. Please download the PDF to view it: <a :href="resUrl">下载 PDF</a>
            </iframe>
          </object>

          <div class="Pl-1">
            <div class="P1-title">{{resName}}</div>
            <Share/>      
          </div>

          


          <div class="Pl-2">
            <div class="discuss-t">评论</div>
            <div style="margin: 20px 0;"></div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="300"
              show-word-limit
              class="textarea" rows="6"
            >
            </el-input>
            
            <div class="face_box">
               <img src="~/static/face.png" style="width:26px;height:26px;"><span>添加表情</span>
            </div>
            
            <el-row class="btnBox">
              <el-button @click="discussBtn">发布</el-button>
            </el-row>

          </div>

          <Comlist/>
        </div>
      </div>
    </div>
    <New/>
  </div>
</template>

<script>
import axios from 'axios'
import Top from '~/components/Top.vue'
import Header from '~/components/Header.vue'
import New from '../new.vue'
import  PDFObject  from 'pdfobject'
import Comlist from "./Comlist.vue"	
export default {
  transition:'layout',
  components: {
    Top,Header,New,Comlist
  },
  data () {
    return {
      green:'green',
      icon: [
        // "example",
        // "eye",
        // "form",
        // "link",
        "nested",
        "password",
        "table",
        "tree",
        "user"
      ],
      title: '资源详情',
      srcList: [],         
      showVideo:'',
      StorageuseType:'',
      showTupian:'',
      resUrl:'',
      resCover:'',
      textarea: '',
      resName:'',
      playerOptions: {
        muted: false,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          src: ""
        }],
        autoplay: true,     //自动播放
        width:'1090px',
        height:'565px',
        notSupportedMessage: '此视频暂无法播放，请稍后再试', 
        poster:'', // 你的封面地址
      }
    }
  },
  mounted(){   
    let {resUrl,resName,resType,useType,resCover} = this.$route.query
    this.playerOptions.sources[0].src = resUrl
    this.resUrl = resUrl
    this.resName = resName
    this.resCover = resCover
    this.srcList.push(resCover)
    sessionStorage.setItem('StorageresType',resType)
    sessionStorage.setItem('StorageuseType', useType)
    // console.log(resUrl)
    this.init()
    this.showVideo  = sessionStorage.getItem('StorageresType')
    this.StorageuseType = sessionStorage.getItem('StorageuseType')
    if(PDFObject.supportsPDFs){
        console.log("Yay, this browser supports inline PDFs.");
    } else {
        console.log("Boo, inline PDFs are not supported by this browser");
        this.$message.error('您的浏览器不支持PDF在线预览');
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  },
  computed: {
    playsinline(){
      if (this.resUrl) {
        return true 
      }else{
        return false           
      }
    } 
  },
  methods:{
    discussBtn(){
      this.$message.warning('评论系统在开发中...');
    },
    init(){
      /* axios.get('https://api.myjson.com/bins/9o3g1').then((res)=> {
        if (process.browser){
          console.log(res.data.id)
        }
      }) */
    },
  }
}
</script>

<style>
.el-input__icon{
  color: blue;
}
.el-textarea__inner{
 min-height: 148px;
}
.video-js.vjs-ended .vjs-big-play-button, .video-js.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button{
  left:50%;
  top:50%;
  margin:-20.5px 0 0 -43px ;
  border:none;
}
.vjs-poster{
  background-size: 100%;
}
</style>


<style scoped lang="scss">
.icon-tiaoshi{
  color:#960303;
  &:hover{
    color:#eee;
  }
}

.datile-content{
  background-image: url('~static/bg_01.jpg');
  background-repeat:no-repeat;
  min-height: 940px;
  img{
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .datile-warp{
    @include max-content;
     padding-top: 44px;
    .detail{
      margin-bottom: 50px;
      background: #fff;
      padding: 44px 54px;
      // box-shadow: 0 11px 43px -12px rgba(197, 195, 195, 0.36);
      box-shadow: 0 1px 4px rgba(142, 139, 139, 0.2);
      .Pdfclass{
        border-bottom:1px solid #525659;
      }
      .Pl-1{
        // box-shadow: 1px 0px 0px 0px #f1f1f1,0px 0px 0px 1px #f1f1f1,1px 0px 2px 1px #f1f1f1,0px 2px 2px 1px #f1f1f1;
        box-shadow: 0 1px 6px rgba(142, 139, 139, 0.2);
        margin-top: 30px;
        padding: 28px 32px;
        border: 1px solid #f1f1f1;
        .P1-title{
          color: #333;
          font-size: 28px;
        }
      }
      .Pl-2{
        margin: 40px 0 20px 0;
        .face_box{
          margin-top: 14px;
          margin-left: 18px;
          font-size: 18px;
          color: #bcbcbc;
          float: left;
          img{
            vertical-align: middle;
            margin-right: 10px;
          }
        }
        .discuss-t{
          margin-bottom: 20px;
          color: #0290fc;
          font-size: 22px;
          border-left: 8px solid #0290fc;
          line-height: 22px;
          padding-left: 11px;
        }
        .btnBox{
          text-align: right;
          margin: 20px 0;
          button{
            color: #409EFF;
            border-color: #186ae4;
            background-color: #f6fdff;
            width: 102px;
            &:hover{
              background-color: #ecf5ff;
            }
          }
        }
      }
    }
  }
}
</style>



